import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'

import Taro, { Component, Config } from '@tarojs/taro'
import { AtNoticebar, AtGrid } from 'taro-ui'
import { View } from '@tarojs/components'
import YContentPadded from '../../components/YContentPadded'
import { queryUsers } from '../../actions/goods'

import './Users.scss'

type PageStateProps = {
  goods: object | {},
}

type PageDispatchProps = {
  fetchUsers: (object) => void
}

type PageOwnGoodsUsersProps = {
  id: number,
  avatarUrl: string
}

type PageOwnProps = {
  goods: {
    profile: {
      data: {
        id: number
      }
    },
    users: {
      pagination: { count: number },
      data: PageOwnGoodsUsersProps[]
    }
  },
  fetchUsers: (params: object, callback: (data: { errno: number }) => void) => {}
}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface GoodsUsers {
  props: IProps
}

@connect(({ goods }) => ({
  goods
}), (dispatch) => ({
  fetchUsers(params, callback) {
    dispatch(queryUsers(params, callback))
  }
}))
class GoodsUsers extends Component {
  config: Config = {
    navigationBarTitleText: '查看全部参与者'
  }

  componentWillMount() {
    if (this.props.goods.profile.data) {
      this.props.fetchUsers({ id: this.props.goods.profile.data.id }, data => {
        if (data.errno || typeof data === 'string' ) {
          Taro.showToast({ title: `获取抽奖用户列表失败`, icon: 'none' })
        }
      })
    }
  }

  onLoadMore = (msg) => {
    console.log(msg, 123)
  }

  render() {
    const sourcedata = this.props.goods.users.data || []
    const data = sourcedata.map((item) => ({ id: item.id, image: item.avatarUrl, }))
    return (
      <View>
        <AtNoticebar>当前抽奖共&nbsp;&nbsp;&nbsp;{this.props.goods.users.pagination.count}位参与者</AtNoticebar>
        <YContentPadded>
          <AtGrid
            columnNum={7}
            mode='square'
            hasBorder={false}
            data={data}
          />
        </YContentPadded>
      </View>
    )
  }
}

export default GoodsUsers as ComponentClass<PageOwnProps, PageState>